import React, { Component } from "react"
import Taro from "@tarojs/taro"
import { Swiper, SwiperItem, Image, Text, Navigator, ScrollView, View } from "@tarojs/components"
import clsx from "clsx"
import GpContainer from "@/components/GpContainer"
import GpExplainColumn from "@/components/GpExplainColumn"
import GpDot from "@/components/GpDot"
import GpBlockTitle from "@/components/GpBlockTitle"
import GpVerticelLine from "@/components/GpVerticelLine"
import GpSchoolItem from "@/components/GpSchoolItem"
import GpInstitutionItem from "@/components/GpInstitutionItem"
import GpNewsItem from "@/components/GpNewsItem"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import { Grid } from "@taroify/core"
import { Arrow } from "@taroify/icons"
import { getHomeData } from "@/apis/index"
import { pageMapper, tabbarPages } from "@/constants/pageMap"
import { makePagePath, navigation, commonUrls } from "@/utils/router"
import { setPageMeta } from "@/utils/common"
import GpImageMask from "@/components/GpMask"
import styles from "./index.module.scss"

const ports = [{ text: "首页" }]
const arrowSize = Taro.pxTransform(18)
type IState = {
  /**艺考热点数据 */
  newsHot: IApiRelative.IHome.NewsTextItem[]
  /** 专业解读 */
  interpret: IApiRelative.IHome.InterpretResult[]
  /** 院校标签 */
  schoolTags: IApiRelative.IHome.Int32NullableSelectOption[]
  /** 艺考院校 */
  schools: IApiRelative.IHome.SchoolRecommendResult[]
  /** 专业标签 */
  subjectLevels: IApiRelative.IHome.Int32NullableSelectOption[]
  /** 艺考专业列表 */
  subjects: IApiRelative.IHome.HomeSubjectResult[]
  /** 机构标签 */
  agencyTags: IApiRelative.IHome.Int32NullableSelectOption[]
  /** 艺考机构 */
  agencys: IApiRelative.IHome.AgencyRecommendResult[]
  /** 选校评价 总数 */
  commentTotal: number
  /** 选校评价列表 */
  comments: IApiRelative.IHome.HomeCommentResult[]
  /** 艺考资讯 栏目 */
  // newColumns: IApiRelative.IHome.Int32NullableSelectOption[]
  /** 艺考资讯 */
  news: IApiRelative.IHome.HomeNewsItem[]
  // 以下字段参考百度小程序分段渲染https://smartprogram.baidu.com/docs/develop/performance/performance_demand/
  /** 是否显示 艺考院校 */
  showSchool: boolean
  /** 是否显示 艺考专业 */
  showProfessional: boolean
  /** 是否显示 艺考机构 */
  showInstitution: boolean
  /** 是否显示 学员评价滚动 */
  showStuComment: boolean
  /** 是否显示 艺考资讯 */
  showNews: boolean
  /** 是否显示 快捷导航 */
  showJumpNavs: boolean
  /** 是否显示 当前位置 */
  showCurrentPort: boolean
  pending: boolean
  imageMaskVisible: boolean
  imageMaskMessage: string
}
type IData = {
  accountQr?: string
  currentHot: number
  currentComment: number
}
export default class Index extends Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      newsHot: [],
      interpret: [],
      schoolTags: [],
      schools: [],
      subjectLevels: [],
      subjects: [],
      agencyTags: [],
      agencys: [],
      commentTotal: 0,
      comments: [],
      news: [],
      showSchool: false,
      showProfessional: false,
      showInstitution: false,
      showStuComment: false,
      showNews: false,
      showJumpNavs: false,
      showCurrentPort: false,
      pending: true,
      imageMaskVisible: false,
      imageMaskMessage: "长按识别"
    }
    this.extData = {
      currentHot: 0,
      currentComment: 0
    }
  }
  onShareAppMessage() {}
  onLoad(query: Recordable) {
    console.log("onload 参数: ", query)
    this.checkGaokaoSchema(query)
    this.getData()
  }
  checkGaokaoSchema = (query: Recordable) => {
    if (!query) return
    // 解析高考进入参数
    let keyField = Object.keys(query).find(key => {
      return decodeURIComponent(key).includes("from=gaokao")
    })
    const _query = {} as any
    if (keyField) {
      keyField = decodeURIComponent(keyField)
      keyField.split("&").reduce((prev, next) => {
        const [key, val] = next.split("=")
        prev[key] = val
        return prev
      }, _query)
    }
    console.log("index 页面参数: _query", _query)
    if (!_query.from || _query.from !== "gaokao") return
    // 高考工具公众号查询点击进入
    if (_query.accountQr) {
      this.extData.accountQr = _query.accountQr
      this.setState({
        imageMaskVisible: true,
        imageMaskMessage: "长按识别进入公众号"
      })
    } else if (_query.contactQr && _query.contactQr == "1") {
      this.extData.accountQr = "https://static.91goodschool.com/public/gaokao/gaokao2023guide.png"
      this.setState({
        imageMaskVisible: true,
        imageMaskMessage: "长按图片识别二维码"
      })
    }
  }
  renderImageMask = () => {
    const { imageMaskVisible, imageMaskMessage } = this.state
    const { accountQr } = this.extData

    return (
      <GpImageMask
        src={accountQr as string}
        message={imageMaskMessage}
        visible={imageMaskVisible}
      />
    )
  }
  componentDidShow() {
    setPageMeta({
      keywords:
        "择艺宝，艺考培训，艺考院校，艺考专业，艺考培训机构，艺考机构排名，艺考专题，艺考政策资讯",
      title: "择艺宝-专业艺考招生报名平台",
      description:
        "择艺宝是一家专注艺考招生考试报名的咨询服务平台，为艺考生提供一站式艺考择校选校服务解决方案。择艺宝包含艺考选专业、艺考选学校、艺考政策、艺考资讯问答等艺考生关心的相关信息。"
    })
  }
  getData = () => {
    getHomeData("").then(res => {
      console.log("getHomeData", res)
      if (res.data.success) {
        const retData = res.data.data
        const _newsHot = retData.newsHots || []
        _newsHot.forEach(l => {
          l.url = makePagePath(pageMapper.newsDetail, { id: l.id })
        })
        const _subjects = retData.subjects || []
        _subjects.forEach(l => {
          l.url = makePagePath(pageMapper.proIntro, { id: l.id })
        })
        const _comments = retData.comments || []
        _comments.forEach(l => {
          l.url = makePagePath(pageMapper.stuComment, { agencyId: l.agencyId })
        })
        const _news = retData.news || []
        _news.forEach(l => {
          if (l.type === 1) {
            l.url = makePagePath(pageMapper.newsDetail, { id: l.id })
          } else {
            l.url = makePagePath(pageMapper.qaDetail, { id: l.id })
          }
        })
        const _schoolTags = retData.schoolTags || []
        _schoolTags.forEach(l => {
          l.url = makePagePath(pageMapper.shoolQuery, { feature: l.value })
        })
        const _subjectLevels = retData.subjectLevels || []
        _subjectLevels.forEach(l => {
          l.url = makePagePath(pageMapper.professional, { level: l.value })
        })
        const _agencyTags = retData.agencyTags || []
        _agencyTags.forEach(l => {
          l.url = makePagePath(tabbarPages.gpPluginInstitution, { feature: l.value }, false, true)
        })
        this.setState(
          {
            newsHot: _newsHot,
            interpret: retData.interpret || [],
            pending: false
          },
          () => {
            this.setState({
              showSchool: true,
              schools: retData.schools || [],
              schoolTags: _schoolTags,
              showProfessional: true,
              subjectLevels: _subjectLevels,
              subjects: _subjects,
              showInstitution: true,
              agencyTags: _agencyTags,
              agencys: retData.agencys || [],
              showStuComment: true,
              commentTotal: retData.commentTotal || 0,
              comments: _comments,
              showNews: true,
              news: _news,
              showJumpNavs: true,
              showCurrentPort: true
            })
          }
        )
      }
    })
  }
  /** 轮播 */
  renderSwiper = () => {
    return (
      <View className="bg-hex-fff pt-20px">
        <Swiper
          className="h-248px"
          indicatorColor="rgba(255, 255, 255, 0.5)"
          indicatorActiveColor="#FFFFFF"
          circular
          indicatorDots
          autoplay
        >
          <SwiperItem>
            <Navigator
              url={commonUrls.calculator}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_caculator.jpg"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.examGuide}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_1.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.institution}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
              openType="switchTab"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_2.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.news}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_3.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
        </Swiper>
      </View>
    )
  }
  /** 导航 */
  renderNavLinks = () => {
    return (
      <View className="pl-64px pr-56px  bg-hex-fff">
        <View className="pt-45px">
          <View className="flex flex-row justify-between">
            {/* <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.shoolQuery}
              className="flex flex-col items-center justify-center"
            >
              <Image
                src="/images/index/yxcx-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">院校查询</Text>
            </Navigator>
            {/* </Grid.Item> */}
            {/* <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.professional}
              className="flex flex-col items-center justify-center"
            >
              <Image
                src="/images/index/zydq-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">专业大全</Text>
            </Navigator>
            {/* </Grid.Item> */}
            {/* <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.institution}
              className="flex flex-col items-center justify-center"
              openType="switchTab"
            >
              <Image
                src="/images/index/pxjg-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">培训机构</Text>
            </Navigator>
            {/* </Grid.Item>
          <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.proExplain}
              className="flex flex-col items-center justify-center"
            >
              <Image
                src="/images/index/zyjd-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">专业解读</Text>
            </Navigator>
          </View>
          <View className="flex flex-row justify-between mt-40px">
            {/* </Grid.Item>
          <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.introBadge}
              className="flex flex-col items-center justify-center"
            >
              <Image
                src="/images/index/zsjz-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">招生简章</Text>
            </Navigator>
            {/* </Grid.Item>
          <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.column}
              className="flex flex-col items-center justify-center"
            >
              <Image
                src="/images/index/ykzt-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">艺考专题</Text>
            </Navigator>
            {/* </Grid.Item>
          <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.institutionRanking}
              className="flex flex-col items-center justify-center"
            >
              <Image
                src="/images/index/jgpm-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">机构排名</Text>
            </Navigator>
            {/* </Grid.Item>
          <Grid.Item> */}
            <Navigator
              hoverClass="none"
              url={commonUrls.news}
              className="flex flex-col items-center justify-center"
            >
              <Image
                src="/images/index/ykzx-icon.png"
                className="w-84px h-84px box-border"
                mode="aspectFit"
              />
              <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">艺考资讯</Text>
            </Navigator>
            {/* </Grid.Item> */}
          </View>
        </View>
      </View>
    )
  }
  handleHotSwipeChange = (ev: any) => {
    this.extData.currentHot = ev.detail.current
  }
  handleHotClick = () => {
    const { newsHot } = this.state
    if (newsHot && newsHot.length > 0) {
      const currentHot = newsHot[this.extData.currentHot]
      if (currentHot) {
        navigation(pageMapper.newsDetail, { id: currentHot.id })
      }
    }
  }
  /**艺考热点 */
  renderHot = () => {
    const { newsHot, pending } = this.state
    if (!pending && newsHot.length === 0) return null
    return (
      <View className="bg-hex-fff pt-34px">
        <View className={styles["hot-area"]} onClick={this.handleHotClick}>
          {!pending ? (
            <React.Fragment>
              <Image
                src="/images/index/ykrd.png"
                className="w-55px h-67px flex-none mr-35px"
                mode="aspectFit"
              />
              <Swiper
                className="flex-1 h-full"
                vertical
                autoplay
                circular
                onChange={this.handleHotSwipeChange}
              >
                {newsHot.map(l => (
                  <SwiperItem className="h-full" key={l.id as number}>
                    <View className="yahei font-normal text-28px text-hex-2c2c35 h-full ellipse_1 leading-68px">
                      {l.title}
                    </View>
                  </SwiperItem>
                ))}
              </Swiper>
              <View className="flex flex-row items-center flex-none ml-56px">
                <GpDot className="mr-12px" />
                <Arrow
                  color="#2C2C35"
                  style={{
                    fontSize: arrowSize
                  }}
                />
              </View>
            </React.Fragment>
          ) : null}
        </View>
      </View>
    )
  }
  /**艺考专题 */
  renderColumn = () => {
    return (
      <View className="px-30px pt-66px bg-hex-fff">
        <View className="pb-34px">
          <GpBlockTitle title="艺考专题" />
        </View>
        <GpExplainColumn />
      </View>
    )
  }
  /** 专业解读跳转 */
  handleInterpretJump = (id: number) => {
    navigation(pageMapper.proSpecificExplain, { id })
  }
  /** 专业解读 */
  renderReading = () => {
    const { interpret } = this.state
    return (
      <View className="pt-66px bg-hex-fff">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="专业解读" showArrow navigatorLink={commonUrls.proExplain} />
        </View>
        <View>
          <ScrollView scrollX className={styles["reading-scroll"]}>
            {interpret.map((l, index) => (
              <View
                className={clsx(styles["reading-item"], {
                  "ml-30px": index === 0
                })}
                key={l.id as number}
                onClick={() => this.handleInterpretJump(l.id as number)}
              >
                <View className="flex justify-center">
                  <Image
                    className="w-110px h-110px box-border rounded-1 mt-45px"
                    src={l.picture as string}
                    mode="scaleToFill"
                  />
                </View>
                <View className="yahei font-normal text-32px text-hex-2c2c35 text-center mt-32px">
                  <Text>{l.name}方向</Text>
                </View>
                <View className="yahei font-normal text-24px text-hex-b8b8bf flex flex-row mt-16px justify-center">
                  <Text className="pr-12px">专业介绍</Text>
                  <GpVerticelLine height={30} />
                  <Text className="pl-12px">发展方向</Text>
                </View>
              </View>
            ))}
          </ScrollView>
        </View>
      </View>
    )
  }
  /** 艺考院校 */
  renderSchool = () => {
    const { schools, schoolTags, showSchool } = this.state
    if (!showSchool) return null
    return (
      <View className="pt-94px bg-hex-fff">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="艺考院校" showArrow navigatorLink={commonUrls.shoolQuery} />
        </View>
        <View className="pl-30px">
          <ScrollView scrollX className="whitespace-nowrap">
            {schoolTags.map((l, index) => (
              <Navigator hoverClass="none" url={l.url} className={styles["school-tag"]} key={index}>
                {l.label}
              </Navigator>
            ))}
          </ScrollView>
        </View>
        <View className="px-30px mt-13px">
          <View className="flex flex-col">
            {schools.map(l => (
              <GpSchoolItem key={l.id} schoolItem={l} />
            ))}
          </View>
        </View>
      </View>
    )
  }
  /** 艺考专业 */
  renderProfessional = () => {
    const { subjectLevels, subjects, showProfessional } = this.state
    if (!showProfessional) return null
    return (
      <View className="pt-87px bg-hex-fff">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="艺考专业" showArrow navigatorLink={commonUrls.professional} />
        </View>
        <View className="pl-30px">
          <ScrollView scrollX className="whitespace-nowrap">
            {subjectLevels.map((l, index) => (
              <Navigator hoverClass="none" url={l.url} className={styles["school-tag"]} key={index}>
                {l.label}
              </Navigator>
            ))}
          </ScrollView>
        </View>
        <View className="mt-40px">
          <View className="px-30px">
            <View className={styles["profession-grid"]}>
              {subjects.map((l, index) => {
                return (
                  <Grid.Item key={index}>
                    <Navigator
                      url={l.url}
                      className={clsx(
                        "rounded-12px bg-hex-fafafd h-131px w-333px box-border py-24px px-32px flex flex-col justify-center"
                      )}
                      hoverClass="none"
                    >
                      <Text className="yahei font-normal text-30px text-hex-2c2c35 whitespace-nowrap truncate">
                        {l.name}
                      </Text>
                      <Text className="yahei font-normal text-24px text-hex-b8b8bf mt-12px">
                        专业代码: {l.code}
                      </Text>
                    </Navigator>
                  </Grid.Item>
                )
              })}
            </View>
          </View>
        </View>
      </View>
    )
  }
  /** 艺考机构 */
  renderInstitution = () => {
    const { agencyTags, agencys, showInstitution } = this.state
    if (!showInstitution) return null
    const len = agencys.length
    return (
      <View className="pt-88px bg-hex-fff">
        <View className="pb-34px px-30px">
          <GpBlockTitle
            title="艺考机构"
            showArrow
            navigatorLink={commonUrls.institution}
            openType="switchTab"
          />
        </View>
        <View className="pl-30px">
          <ScrollView scrollX className="whitespace-nowrap">
            {agencyTags.map((l, index) => (
              <Navigator
                hoverClass="none"
                url={l.url}
                className={styles["school-tag"]}
                key={index}
                openType="switchTab"
              >
                {l.label}
              </Navigator>
            ))}
          </ScrollView>
        </View>
        <View className="px-30px flex flex-col  mt-40px">
          {agencys.map((l, index) => {
            return (
              <View
                key={index}
                className={clsx({
                  "mb-20px": index !== len - 1
                })}
              >
                <GpInstitutionItem
                  shadow
                  pureProps={{
                    institution: l
                  }}
                />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
  handleCommentSwipeChange = (ev: any) => {
    this.extData.currentComment = ev.detail.current
  }
  handleCommentClick = () => {
    const { comments } = this.state
    if (comments && comments.length > 0) {
      const currentComment = comments[this.extData.currentComment]
      if (currentComment) {
        navigation(pageMapper.stuComment, { agencyId: currentComment.agencyId })
      }
    }
  }
  /** 学员评价滚动 */
  renderStuComment = () => {
    const { commentTotal, comments, showStuComment } = this.state
    if (!showStuComment) return null
    if (!comments || comments.length === 0) return null
    return (
      <View className="bg-hex-fff pt-40px">
        <View className={styles["stu-comment"]} onClick={this.handleCommentClick}>
          <Image
            src="/images/index/xxpj.png"
            className="w-74px h-92px flex-none mr-16px"
            mode="aspectFit"
          />
          <Swiper
            className="flex-1 h-full"
            vertical
            autoplay
            onChange={this.handleCommentSwipeChange}
          >
            {comments.map((l, index) => (
              <SwiperItem className="h-full" key={index}>
                <View className="h-full block py-16px">
                  <View className="flex flex-row items-center">
                    <View className="yahei font-normal text-28px text-hex-666">{l.userName}</View>
                    <View className="yahei font-normal text-24px text-b8b8bf ml-8px">
                      @{l.agencyName}
                    </View>
                  </View>
                  <View className="mt-13px yahei font-normal text-28px text-hex-666 truncate whitespace-nowrap">
                    {l.content}
                  </View>
                </View>
              </SwiperItem>
            ))}
          </Swiper>
          <View
            hoverClass="none"
            className="flex flex-row items-center absolute top-19px right-24px"
          >
            <View className="yahei font-normal text-24px text-hex-b8b8bf">
              {commentTotal}人评论
            </View>
            <Arrow
              color="#B8B8BF"
              style={{
                fontSize: arrowSize
              }}
            />
          </View>
        </View>
      </View>
    )
  }
  /**  艺考资讯*/
  renderNews = () => {
    const { news, showNews } = this.state
    if (!showNews) return null
    const len = news.length
    return (
      <View className="pt-88px bg-hex-fff">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="艺考资讯" showArrow navigatorLink={commonUrls.news} />
        </View>
        <View className="pl-30px">
          <ScrollView scrollX>
            <Navigator
              hoverClass="none"
              url={commonUrls.examDynamic}
              className={styles["school-tag"]}
            >
              <Text>艺考动态</Text>
            </Navigator>
            <Navigator hoverClass="none" url={commonUrls.examQA} className={styles["school-tag"]}>
              艺考问答
            </Navigator>
            <Navigator
              hoverClass="none"
              url={commonUrls.trainGuide}
              className={styles["school-tag"]}
            >
              培训指南
            </Navigator>
            <Navigator
              hoverClass="none"
              url={commonUrls.examStrategy}
              className={styles["school-tag"]}
            >
              艺考政策
            </Navigator>
          </ScrollView>
        </View>
        <View className="mt-40px px-30px pb-33px flex flex-col">
          {news.map((l, index) => {
            return (
              <View
                key={index}
                className={clsx({
                  "mb-28px": index !== len - 1
                })}
              >
                <GpNewsItem
                  text={l.title as string}
                  navigationLink={l.url}
                  time={l.date as string}
                />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    if (!this.state.showJumpNavs) return null
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render() {
    // if (!this.state.newsHot || this.state.newsHot.length === 0) return null
    return (
      <GpContainer className="index">
        <View>
          {/* 轮播 */}
          {this.renderSwiper()}
          {/* 导航 */}
          {this.renderNavLinks()}
          {/* 艺考热点 */}
          {this.renderHot()}
          {/* 艺考专题 */}
          {this.renderColumn()}
          {/* 专业解读 */}
          {this.renderReading()}
          {/* @note 分段渲染, 以下首屏渲染之后渲染 */}
          {/* 艺考院校 */}
          {this.renderSchool()}
          {/* 艺考专业 */}
          {this.renderProfessional()}
          {/* 艺考机构 */}
          {this.renderInstitution()}
          {/** 学员评价滚动 */}
          {this.renderStuComment()}
          {/* 艺考资讯 */}
          {this.renderNews()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          {this.state.showCurrentPort ? <GpCurrentPort ports={ports} /> : null}
        </View>
        {/* 底部导航 */}
        {this.state.imageMaskVisible ? null : <GpTabbar type={10} showIndex={false} />}
        {this.renderImageMask()}
      </GpContainer>
    )
  }
}
